<!DOCTYPE html>
<html>
<head>
    <title>K线图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
    <style>
        .chart-container {
            position: relative;
            margin: auto;
            width: 90%;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="klineChart"></canvas>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('klineChart');
            const data = JSON.parse('{{ kline_data|tojson|safe }}');
            
            const chart = new Chart(ctx, {
                type: 'candlestick',
                data: {
                    datasets: [{
                        data: data,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        zoom: {
                            pan: { enabled: true, mode: 'xy' },
                            zoom: { 
                                wheel: { enabled: true },
                                pinch: { enabled: true },
                                mode: 'xy'
                            }
                        },
                        annotation: {
                            drawTime: 'afterDatasetsDraw',
                            annotations: []
                        }
                    },
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day'
                            }
                        }
                    }
                }
            });

            // 添加窗口大小变化时的重绘逻辑
            window.addEventListener('resize', function() {
                chart.resize();
            });
        });
    </script>
</body>
</html>